<template>
  <span>{{ getNameByID(userList, "value", userId, "label") || userId }}</span>
</template>

<script setup>
import { unref } from "vue";
const props = defineProps({
  userList: {
    type: Array,
    default: () => []
  },
  userId: {
    type: String,
    default: ""
  }
});

const getNameByID = (list, key, value, name) => {
  let nameList = [];
  if (list.length) {
    let dataList = unref(list);
    if (dataList.length) {
      let userIds = props.userId.split(",");
      if (userIds.length) {
        userIds.forEach(item => {
          let obj = dataList.filter(v => v[key] == item);
          if (obj.length) {
            nameList.push(obj[0][name]);
          }
        });
      }
    }
  }
  return nameList.join(",");
};
</script>
